<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>cyh3</title>
    <link rel="stylesheet" href="./swiper/swiper/swiper.min.css">


    <script src="font/iconfont.js"></script>
    <style>
         body,h2,ul,p{
            margin: 0;
            padding: 0;
        }
        .title{
            position: fixed;
            width: 100%;
            height: 150px;
            display: flex;
            z-index: 4;
            border-bottom: 3px solid rgb(244,244,244);
            margin-top: -250px;
            background-color: #fff;
        }
        .title h2{
            margin-left: 440px;
            margin-top: 40px;
            font-size: 50px;
        }
        .title_jt{
            width: 60px;
            height: 140px;
        }
        .invent{
            margin-left: 250px;
            width: 100px;
            height: 150px;
        }
        .title_sm{
            position: relative;
            bottom: 15px;
            left: 8px;
            width: 70px;
        }
        .invent p{
            position: relative;
            bottom: 50px;
            left: 5px;
            font-size: 23px;
        }

       .second{
            position: relative;
            top: -46px;
            left: 40px;
            background-color: rgb(245,246,248);
            width: 900px;
            height: 100px;
            border-radius: 50px;
            margin-top: 250px;
       }
       .title_ss{
            position: relative;
            left: 330px;
            bottom: 25px;
            width: 60px;
       }
       .second p{
            position: absolute;
            bottom: 25px;
            left: 420px;
            font-size: 42px;
            color: rgb(153, 153, 153);
            opacity: .6;
       }
       .third{
           margin-top: 5px;
           height: 80px;
           display: flex;
           border-bottom: 30px solid rgb(251, 251, 251);
       }
       .third p{
          font-size: 42px;
          margin-left: 80px;
          color: rgb(180, 180, 180);
       } 
       a{
           text-decoration: none;
       }
       .huadong{
           height: 100px;
           border-bottom: 20px solid rgb(251, 251, 251);
          }

          .huadong .swiper-wrapper{
            top: 21px;
            left: 20px;
            display: flex;
          }

        .swiper-slide{
            height: 60px;
            background-color: rgb(247, 247, 247);
          }
         .huadong p{
           text-align: center;
           line-height: 60px;
          font-size: 30px;
          margin-top: 0;
          color: rgb(181,185,188);
          }
        .box1{
              height: 900px;
              border-bottom: 30px solid rgb(242,242,242);
          }
        .box li{
              display: flex;
          }
        .title_tx{
              margin-left: 30px;
              width: 100px;
          }
        .title_gz{
              margin-top: -10px;
              margin-left: 600px;
              width: 100px;
          }
        .box1 .p1{
              margin-top: 35px;
              font-size: 30px;
              margin-left: 40px;
          }
        .box1 .p2{
              font-size: 30px;
              margin-top: 80px;
              margin-left: -90px;
              color: rgb(180, 180, 180);
          }
       .bottom{
              margin-top: -150px;
              margin-bottom: 60px;
              height: 90px;
              display: flex;
            }
        .tubiao{
            margin-top: 50px;
            display: flex;
            margin-right: 170px;
            }
        .icon{
            width: 50px;
            margin-left: 20px;
            margin-right: 25px;

            }
        
        .bottom p{
            font-size: 30px;
            }
        ul{
            list-style: none;
        }
        img{
            display: block;
            border: none;
        } 
        .jlist li{
            margin-bottom: 280px;

        }
        .jlist img{
            margin-top: 250px;
            margin-left: -900px;
            width: 700px;
            height: 400px;
        }
        .jlist h3{
            width: 900px;
            margin-left: 40px;
            margin-top: 10px;
            font-size: 50px;
            line-height: 50px;
        }
        .jlist p{
            width: 900px;
            margin-left: 40px;
            margin-top: -15px;
            font-size: 30px;
            line-height: 30px;
            color: rgb(158, 152, 152);
        }

        .zh{
            width: 100%;
            height: 180px;
            background-color: rgb(242,242,242);
        }
        .zh p{
            line-height: 0;
            text-align: center;
            font-size: 30px;
            color: rgb(180, 180, 180);
        }
        
       .navi{
           height: 150px;
            list-style: none;
            position: fixed;
            left: 0;
            bottom: 0;
            width: 100%;
            background-color: #fff;
            z-index: 9;
            display: flex;
            background-color: rgb(247, 247, 247);
       }
       .navi>li{
           width: 25%;
           text-align: center;
       }
       .icon2{
            width: 80px;
            height: 100px;
            vertical-align: 20px;
            fill:currentColor;
            overflow: hidden;
            margin-bottom: 15px;
            margin-right: 20px;
            
       }
       .navi a{
           text-decoration: none;
       }
       .navi p{
           font-size: 40px;
           margin-right: 18px;
           margin-top: -50px;
           color: rgb(102,102,102);
       } 

       #box{
            position: fixed;
            top: 1300px;
            left: 800px;
            padding: 40px;
            font-size: 30px;
            color: rgb(5, 1, 1);
            background-color: rgb(122, 117, 117);
            border-radius: 100px;
            z-index: 4;
            display: none;
        }
    </style>
</head>
<body>
    <div class="title">
        <h2>首页</h2>
        <svg class="title_jt" aria-hidden="true">
            <use xlink:href="#icon-xiajiantou"></use>
        </svg>
        <div class="invent">
            <svg class="title_sm" aria-hidden="true">
                <use xlink:href="#icon-saoma"></use>
            </svg>
            <p>邀请码</p>
        </div>
    </div>

        <a href="#">
            <div class="second">
                <svg class="title_ss" aria-hidden="true">
            <use xlink:href="#icon-sousuo"></use>
            </svg>
                <p>找资料</p>
            </div>
        </a>
    <div class="third">
        <a href="project1-index.html"><p>常用</p></a>
        <a href="#"><p>关注</p></a>
        <a href="project6.html"><p>活动</p></a>
        <a href="project4.html"><p>微读书</p></a>
        <a href="#"><p>知视频</p></a>
    </div> 

    <div class="swiper huadong">
        <div class="swiper-wrapper">
          <div class="swiper-slide">
              <p>推荐</p>
        </div>
          <div class="swiper-slide">
              <p>最新</p>
            </div>
          <div class="swiper-slide">
              <p>文学</p>
            </div>
          <div class="swiper-slide">
              <p>历史</p>
            </div>
          <div class="swiper-slide">
              <p>哲学</p>
            </div>
          <div class="swiper-slide">
              <p>经管</p>
            </div>
          <div class="swiper-slide">
              <p>政治</p>
            </div>
          <div class="swiper-slide">
              <p>社科</p>
            </div>
        </div>
        <div class="swiper-pagination"></div>
      </div>
      
        <div class="box">
            <div class="box1">
              <li>
                  <a href="#">
                    <svg class="title_tx" aria-hidden="true">
                        <use xlink:href="#icon-touxiang"></use>
                    </svg>
                  </a>
                  <p class="p1">常月华</p>
                  <p class="p2">12-09</p>
                  <a href="#">
                      <svg class="title_gz" aria-hidden="true">
                          <use xlink:href="#icon-guanzhu"></use>
                      </svg>
                  </a>
  
              </li>
              <ul class="jlist"></ul>
            </div>
      
            <div class="bottom">
                <div class="tubiao f">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-liaotian6"></use>
                    </svg>
                    <p>618</p>
                </div>
                <div class="tubiao s">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-dianzan"></use>
                    </svg>
                    <p>255</p>
                </div>
                <div class="tubiao t">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-zhuanfa"></use>
                    </svg>
                    <p>转发</p>
                </div>
         </div> 
            </div>
            <div class="box">
                <div class="box1">
                  <li>
                      <a href="#">
                        <svg class="title_tx" aria-hidden="true">
                            <use xlink:href="#icon-touxiang"></use>
                        </svg>
                      </a>
                      <p class="p1">常月华</p>
                      <p class="p2">12-09</p>
                      <a href="#">
                          <svg class="title_gz" aria-hidden="true">
                              <use xlink:href="#icon-guanzhu"></use>
                          </svg>
                      </a>
      
                  </li>
                  <ul class="jlist"></ul>
                </div>
          
                <div class="bottom">
                    <div class="tubiao f">
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-liaotian6"></use>
                        </svg>
                        <p>618</p>
                    </div>
                    <div class="tubiao s">
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-dianzan"></use>
                        </svg>
                        <p>255</p>
                    </div>
                    <div class="tubiao t">
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-zhuanfa"></use>
                        </svg>
                        <p>转发</p>
                    </div>
             </div> 
                </div>
                <div class="box">
                    <div class="box1">
                      <li>
                          <a href="#">
                            <svg class="title_tx" aria-hidden="true">
                                <use xlink:href="#icon-touxiang"></use>
                            </svg>
                          </a>
                          <p class="p1">牛超全</p>
                          <p class="p2">12-09</p>
                          <a href="#">
                              <svg class="title_gz" aria-hidden="true">
                                  <use xlink:href="#icon-guanzhu"></use>
                              </svg>
                          </a>
          
                      </li>
                      <ul class="jlist"></ul>
                    </div>
              
                    <div class="bottom">
                        <div class="tubiao f">
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-liaotian6"></use>
                            </svg>
                            <p>618</p>
                        </div>
                        <div class="tubiao s">
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-dianzan"></use>
                            </svg>
                            <p>255</p>
                        </div>
                        <div class="tubiao t">
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-zhuanfa"></use>
                            </svg>
                            <p>转发</p>
                        </div>
                 </div> 
                    </div>
                    <div class="box">
                        <div class="box1">
                          <li>
                              <a href="#">
                                <svg class="title_tx" aria-hidden="true">
                                    <use xlink:href="#icon-touxiang"></use>
                                </svg>
                              </a>
                              <p class="p1">杨奕心</p>
                              <p class="p2">12-09</p>
                              <a href="#">
                                  <svg class="title_gz" aria-hidden="true">
                                      <use xlink:href="#icon-guanzhu"></use>
                                  </svg>
                              </a>
              
                          </li>
                          <ul class="jlist"></ul>
                        </div>
                  
                        <div class="bottom">
                            <div class="tubiao f">
                                <svg class="icon" aria-hidden="true">
                                    <use xlink:href="#icon-liaotian6"></use>
                                </svg>
                                <p>618</p>
                            </div>
                            <div class="tubiao s">
                                <svg class="icon" aria-hidden="true">
                                    <use xlink:href="#icon-dianzan"></use>
                                </svg>
                                <p>255</p>
                            </div>
                            <div class="tubiao t">
                                <svg class="icon" aria-hidden="true">
                                    <use xlink:href="#icon-zhuanfa"></use>
                                </svg>
                                <p>转发</p>
                            </div>
                     </div> 
                        </div>


                        <div class="zh">
                            <p>查看更多~</p>
                        </div>


    <ul class="navi">
        <li>
            <a href="project1-index.html">
                <svg class="icon2" aria-hidden="true">
                    <use xlink:href="#icon-home"></use>
                </svg>
                <p>首页</p>
            </a>
        </li>
    
        <li>
            <a href="./project2.html">
                <svg class="icon2" aria-hidden="true">
                    <use xlink:href="#icon-xiaoxi0"></use>
                </svg>
                <p>消息</p>
            </a>
        </li>
    
        <li>
            <a href="#">
                <svg class="icon2" aria-hidden="true">
                    <use xlink:href="#icon-biji"></use>
                </svg>
                <p>笔记</p>
            </a>
        </li>
    
        <li>
            <a href="project5.html">
                <svg class="icon2" aria-hidden="true">
                    <use xlink:href="#icon-wo1"></use>
                </svg>
                <p>我</p>
            </a>
        </li>
        <a href="">
            <div id="box">顶部</div>
        </a>

        <!-- js2 -->
        <script src="swiper/swiper/swiper-bundle.min.js"></script>
          
          <!-- json1 -->
          <script>
          var json=[{
            img:"./img/1.jpg",
            tital:"常月华",
            content:"19001011027...",
            
        },{
            img:"./img/2.jpg",
            tital:"今天学习了什么？有什么收获吗？今天所学的知识点对你之后学习有什么帮助？",
            content:"今天所学的知识点对你之后学习有什么帮助？今天学习了什么？有什么收获吗？今天所学的知识点对你之后学习有什么帮助？今天学习...",
            
        },{
            img:"./img/3.jpg",
            tital:"老舍《小时候真傻，居然盼着长大 》| 劳动的滋味",
            content:"劳动是最有滋味的事。肯劳动，连过新年都更有滋味，更多乐趣。...",
            
        },{
            img:"./img/4.jpg",
            tital:"《工匠精神》| 华盛顿——既是好总统又是好工匠",
            content:"乔治·华盛顿拥有的则是和富兰克林完全不同的声望，他从不同的角度审视自己。...",
            
        }
    ];
        var jlist=document.querySelector(".jlist");
        json.forEach(function(v,i){
            var nli=document.createElement("li");/* 创建li元素 */
            nli.innerHTML=`<div>
                <h3>${v.tital}</h3>
            <p>${v.content}</p>
            </div>
            <a href="#"><img src="${v.img}"></a>`;
            //es6新的字符串语法，内部可包括引号，包括变量${}
            jlist.appendChild(nli);
            //在jlist的内部的最后添加nli。
        });
        </script>

        <!-- js3 -->
        <script>
          var swiper = new Swiper(".huadong", {
            slidesPerView: 6,
            spaceBetween: 30,
            freeMode: true,
            pagination: {
              el: ".swiper-pagination",
              clickable: true,
            },
          });
        window.onscroll=function(){
            var st=document.documentElement.scrollTop||document.body.scrollTop;
            console.log(st);
            if(st>1500){//可写固定值,如1000
                box.style.display="block";
                //复杂的改变使用classlist
            }
            else{
                box.style.display="none";
            }
        }
        </script>
</ul> 
</body>
</html>